<template>
        <div>
                <van-nav-bar title="候诊查询" left-text="" left-arrow @click-left="onClickLeft" />
                <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
                        <div style="
        width:100%;
        height: 45px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        ">
                                <div>
                                        <span style="margin-left: 20px;">{{ ii.name }}</span>
                                        <span style="margin-left: 20px;">{{ ii.ma }}</span>
                                </div>
                                <div style="
                display: flex;
                " @click="g4">
                                        <img style="
                    width: 20px;
                    height: 20px;
                    margin-left: 115px;
                    margin-top: 15px;
                    " src="https://cdn7.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg"
                                                alt="">
                                        <p style="
                        margin-left: 2px;
                    ">切换</p>
                                </div>

                        </div>

                        <div style="
                                    width:100%;
                                    height: 40px;
                                    background-color: white;
                                    margin-top: 15px;
                                    border-radius: 7px;
                                    line-height: 40px;
                                    display: flex;
                                    ">
                                <button @click="qw" :class="count == 1 ? 'q1' : 'q2'">候诊（接诊）</button>
                                <button @click="qw1" :class="count == 2 ? 'q3' : 'q4'">检查</button>
                                <button @click="qw2" :class="count == 3 ? 'q5' : 'q6'">取药</button>
                        </div>

                        <div v-if="count == 1" style="
                          width:88%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          ">
                                <div @click="h4">
                                        <div style="
                             display: flex;
                             ">
                                                <div>
                                                        <img style="
                                                width:45px;
                                                height: 45px;
                                                " src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                                                alt="">
                                                </div>
                                                <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                                                        <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">刘医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                                                        <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#1F1F1F;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                                                </div>
                                        </div>
                                        <div style="
                                        display: flex;
                                        ">
                                                <div style="
                                width:148px;
                                height: 38px;
                                background: rgba(255, 251, 230, 1);
                                border-color: rgba(255, 251, 230, 1);
                                border-radius: 18px;
                                font-weight: 400;
                                font-size: 13px;
                                color:#333333;
                                line-height: 38px;
                                display: flex;
                                justify-content:space-around;
                                ">
                                                        <span style="color:#FAAD14;">当前接诊号</span>
                                                        <span style="color:#FAAD14;font-size:20px;">15</span>
                                                </div>
                                                <div style="
                                                font-weight: 400;
                                                color:#1677FF;
                                                font-size: 14px;
                                                margin-top: -8px;
                                                margin-left: 50px;
                                                ">
                                                        查看排队情况 >
                                                </div>
                                        </div>

                                </div>

                        </div>
                        <div v-if="count == 1" style="
                          width:88%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          ">
                                <div @click="h4">
                                        <div style="
                             display: flex;
                             ">
                                                <div>
                                                        <img style="
                                                width:45px;
                                                height: 45px;
                                                " src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                                                alt="">
                                                </div>
                                                <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                                                        <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">张医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                                                        <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#1F1F1F;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                                                </div>
                                        </div>
                                        <div style="
                                        display: flex;
                                        ">
                                                <div style="
                                width:148px;
                                height: 38px;
                                background: rgba(255, 251, 230, 1);
                                border-color: rgba(255, 251, 230, 1);
                                border-radius: 18px;
                                font-weight: 400;
                                font-size: 13px;
                                color:#333333;
                                line-height: 38px;
                                display: flex;
                                justify-content:space-around;
                                ">
                                                        <span style="color:#FAAD14;">当前接诊号</span>
                                                        <span style="color:#FAAD14;font-size:20px;">6</span>
                                                </div>
                                                <div style="
                                                font-weight: 400;
                                                color:#1677FF;
                                                font-size: 14px;
                                                margin-top: -8px;
                                                margin-left: 50px;
                                                ">
                                                        查看排队情况 >
                                                </div>
                                        </div>

                                </div>

                        </div>
                        <div v-if="count == 2" style="
                          width:100%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          ">
                                <div style="
                                width: 100px;
                                height: 83px;
                                background-color: rgba(255, 251, 230, 1);
                                border-radius: 8px;
                                border-color: rgba(255, 251, 230, 1);
                                ">
                                        <p style="
                                font-weight: 400;
                                font-size: 14px;
                                color:#FAAD14;
                                text-align: center;
                                ">前方等待人数</p>
                                        <p style="
                                font-weight: 400;
                                font-size: 20px;
                                color:#FAAD14;
                                text-align: center;
                                margin-top: -15px;
                                ">15</p>
                                </div>
                                <div>
                                        <p style="
                                font-weight: 700;
                                font-size: 14px;
                                color:#000000;
                                margin-left: 30px;
                                ">CT检查室</p>
                                        <p style="
                                font-weight: 400;
                                font-size: 14px;
                                color:#1F1F1F;
                                text-align: center;
                                margin-top: -15px;
                                margin-left: 30px;
                                ">四川省保健院南苑</p>
                                </div>
                        </div>
                        <div v-if="count == 3" style="
                          width:100%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          ">
                                <div style="
                                width: 100px;
                                height: 83px;
                                background-color: rgba(255, 251, 230, 1);
                                border-radius: 8px;
                                border-color: rgba(255, 251, 230, 1);
                                ">
                                        <p style="
                                font-weight: 400;
                                font-size: 14px;
                                color:#FAAD14;
                                text-align: center;
                                ">前方等待人数</p>
                                        <p style="
                                font-weight: 400;
                                font-size: 20px;
                                color:#FAAD14;
                                text-align: center;
                                margin-top: -15px;
                                ">15</p>
                                </div>
                                <div>
                                        <p style="
                                font-weight: 700;
                                font-size: 14px;
                                color:#000000;
                                margin-left: 30px;
                                ">门诊西药房 2号窗口</p>
                                        <p style="
                                font-weight: 400;
                                font-size: 14px;
                                color:#1F1F1F;
                                text-align: center;
                                margin-top: -15px;
                                margin-left: 18px;
                                ">四川省保健院南苑</p>
                                </div>
                        </div>




                </div>
        </div>

        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
                <div style="
        margin-top: 10px;
                    ">
                        <h3 style="
        text-align: center;
        ">选择就诊人</h3>
                        <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
                        <div style="
        width:90%;
        height: 45px;
        background-color: #e6f4ff;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        margin-left: 20px;
        " v-for="(i, index) in renmen" :key="index" @click="dian(i)">
                                <span style="margin-left: 20px;">{{ i.name }}</span>
                                <span style="margin-left: 20px;">{{ i.ma }}</span>
                        </div>



                </div>

        </van-popup>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'


const count = ref(1)


const qw = () => {
        count.value = 1
}
const qw1 = () => {
        count.value = 2
}
const qw2 = () => {
        count.value = 3
}





const router = useRouter()
const h4 = () => {
       router.push("/HouZhenShow") 
}

const de90 = () => {
        router.push("/Q1")
}
const sdf23 = () => {
        router.push("/Q2")
}
const ii = ref({
        name: "王小轲",
        ma: "2015*****10"
})
const showBottom = ref(false)

const renmen = ref([
        {
                name: "王小轲",
                ma: "2015*****10"
        },
        {
                name: "李玲玲",
                ma: "2015*****11"
        },
])
let flags = ref(true)
const flagsw = () => {
        flags.value = true
}
const flagsw1 = () => {
        flags.value = false
}
const dian = (i: any) => {
        ii.value = i
        showBottom.value = false

}


const onClickLeft = () => history.back();


const g4 = () => {
        showBottom.value = true
}





</script>

<style scoped>
.q1 {
        width: 114px;
        height: 41px;
        background-color: rgba(22, 119, 255, 1);
        border: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        color: rgba(242, 242, 242, 1);
        font-size: 14px;
}

.q2 {
        width: 114px;
        height: 41px;
        background-color: rgb(255, 255, 255);
        border: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        color: rgb(0, 0, 0);
        font-size: 14px;
}

.q3 {
        width: 114px;
        height: 41px;
        background-color: rgba(22, 119, 255, 1);
        border: 0;
        color: rgba(242, 242, 242, 1);
        font-size: 14px;
}

.q4 {
        width: 114px;
        height: 41px;
        background-color: rgb(255, 255, 255);
        border: 0;
        color: rgb(0, 0, 0);
        font-size: 14px;
}

.q5 {
        width: 114px;
        height: 41px;
        background-color: rgba(22, 119, 255, 1);
        border: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        color: rgba(242, 242, 242, 1);
        font-size: 14px;
}

.q6 {
        width: 114px;
        height: 41px;
        background-color: rgb(252, 252, 252);
        border: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        color: rgb(0, 0, 0);
        font-size: 14px;
}

.qwerg41 {
        width: 50%;
        height: 40px;
        background-color: white;
        border: 0;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        background-color: white;
        color: black;
}

.activ1d1d1e {
        width: 50%;
        height: 40px;
        background-color: #1677ff;
        color: white;
        border: 0;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
}

.qwe111rg41 {
        width: 50%;
        height: 40px;
        background-color: white;
        color: black;
        border: 0;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
}

.activd1d1e {
        width: 50%;
        height: 40px;
        background-color: #1677ff;
        color: white;
        border: 0;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
}
</style>